import React, { PropTypes, PureComponent } from 'react';
import { Icon, Affix, Button } from 'antd';
import styles from './drawer.less';

class Drawer extends PureComponent {
	render() {
		// { open = false, horiz = true, title = '', changeOpen, children }
		const { open = false, horiz = true, title = '', changeOpen, children } = this.props;
		const openClass = open ? styles.open : '';
		const horizClass = horiz ? '' : styles.vertical;

		return (
			<div className={`${styles.drawer} ${horizClass} ${openClass}`} ref={(node) => { this.container = node; }}>
				<div className={styles.drawerWrapper}>
					<div className={styles.drawerHeader}>
						<Icon type="close" className={styles.drawerClose} onClick={(e) => { changeOpen(false); }} />{title}
					</div>
				</div>
				<div className={styles.drawerContent}>
					{open && children}
				</div>
			</div>
		);
	}
}
Drawer.propTypes = {
	children: PropTypes.any.isRequired,
	horiz: PropTypes.bool,
	title: PropTypes.object,
	open: PropTypes.bool,
	changeOpen: PropTypes.func,
};

export default Drawer;
